<template>
  <div class="packaging-page">
    <div class="page-header">
      <h2>
        <el-icon><Box /></el-icon>
        商品包装规格管理
      </h2>
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>
        添加规格
      </el-button>
    </div>

    <el-card>
      <template #header>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="包装规格" name="spec" />
          <el-tab-pane label="装箱信息" name="box" />
          <el-tab-pane label="托盘配置" name="pallet" />
        </el-tabs>
      </template>

      <!-- 包装规格 -->
      <div v-show="activeTab === 'spec'">
        <el-table :data="packagingSpecs" stripe>
          <el-table-column prop="productCode" label="商品编码" width="120" />
          <el-table-column prop="productName" label="商品名称" min-width="150" />
          <el-table-column label="包装级别" width="120">
            <template #default="{ row }">
              <el-tag :type="getLevelType(row.level)">{{ row.level }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="packagingUnit" label="包装单位" width="100" />
          <el-table-column prop="quantity" label="包装数量" width="100" />
          <el-table-column label="尺寸(长×宽×高)" width="180">
            <template #default="{ row }">
              {{ row.length }}×{{ row.width }}×{{ row.height }}cm
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="重量" width="100">
            <template #default="{ row }">
              {{ row.weight }}kg
            </template>
          </el-table-column>
          <el-table-column prop="volume" label="体积" width="100">
            <template #default="{ row }">
              {{ row.volume }}m³
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" text @click="handleEdit(row)">
                编辑
              </el-button>
              <el-button type="danger" size="small" text @click="handleDelete(row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 装箱信息 -->
      <div v-show="activeTab === 'box'">
        <el-table :data="boxingInfo" stripe>
          <el-table-column prop="productCode" label="商品编码" width="120" />
          <el-table-column prop="productName" label="商品名称" min-width="150" />
          <el-table-column prop="innerBoxQty" label="内盒装量" width="100" />
          <el-table-column prop="outerBoxQty" label="外箱装量" width="100" />
          <el-table-column label="外箱尺寸" width="180">
            <template #default="{ row }">
              {{ row.boxLength }}×{{ row.boxWidth }}×{{ row.boxHeight }}cm
            </template>
          </el-table-column>
          <el-table-column prop="grossWeight" label="毛重" width="100">
            <template #default="{ row }">
              {{ row.grossWeight }}kg
            </template>
          </el-table-column>
          <el-table-column prop="netWeight" label="净重" width="100">
            <template #default="{ row }">
              {{ row.netWeight }}kg
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" text @click="handleEditBox(row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 托盘配置 -->
      <div v-show="activeTab === 'pallet'">
        <el-table :data="palletConfig" stripe>
          <el-table-column prop="productCode" label="商品编码" width="120" />
          <el-table-column prop="productName" label="商品名称" min-width="150" />
          <el-table-column prop="palletType" label="托盘类型" width="120">
            <template #default="{ row }">
              <el-tag>{{ row.palletType }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="layersPerPallet" label="每托层数" width="100" />
          <el-table-column prop="boxesPerLayer" label="每层箱数" width="100" />
          <el-table-column prop="totalBoxes" label="总箱数" width="100" />
          <el-table-column prop="palletWeight" label="托盘重量" width="120">
            <template #default="{ row }">
              {{ row.palletWeight }}kg
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" text @click="handleEditPallet(row)">
                编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 包装规格对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
      <el-form :model="specForm" label-width="120px">
        <el-form-item label="商品">
          <el-select v-model="specForm.productId" placeholder="请选择商品" style="width: 100%" filterable>
            <el-option
              v-for="product in products"
              :key="product.id"
              :label="`${product.code} - ${product.name}`"
              :value="product.id"
            />
          </el-select>
        </el-form-item>

        <el-divider>包装信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="包装级别">
              <el-select v-model="specForm.level" placeholder="请选择" style="width: 100%">
                <el-option label="最小包装" value="最小包装" />
                <el-option label="中包装" value="中包装" />
                <el-option label="大包装" value="大包装" />
                <el-option label="外箱包装" value="外箱包装" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="包装单位">
              <el-select v-model="specForm.packagingUnit" placeholder="请选择" style="width: 100%">
                <el-option label="个" value="个" />
                <el-option label="盒" value="盒" />
                <el-option label="箱" value="箱" />
                <el-option label="包" value="包" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="包装数量">
          <el-input-number v-model="specForm.quantity" :min="1" style="width: 200px" />
          <span style="margin-left: 10px; color: #909399">
            1{{ specForm.packagingUnit }}包含{{ specForm.quantity }}个基本单位
          </span>
        </el-form-item>

        <el-divider>尺寸信息</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="长度(cm)">
              <el-input-number v-model="specForm.length" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宽度(cm)">
              <el-input-number v-model="specForm.width" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高度(cm)">
              <el-input-number v-model="specForm.height" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="重量(kg)">
              <el-input-number v-model="specForm.weight" :min="0" :precision="3" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="体积(m³)">
              <el-input-number v-model="calculatedVolume" :precision="4" disabled style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider>包装材料</el-divider>
        <el-form-item label="材料">
          <el-select v-model="specForm.material" placeholder="请选择材料" style="width: 100%">
            <el-option label="纸箱" value="纸箱" />
            <el-option label="塑料盒" value="塑料盒" />
            <el-option label="木箱" value="木箱" />
            <el-option label="泡沫箱" value="泡沫箱" />
            <el-option label="吸塑盒" value="吸塑盒" />
          </el-select>
        </el-form-item>

        <el-form-item label="包装说明">
          <el-input v-model="specForm.description" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <!-- 装箱信息对话框 -->
    <el-dialog v-model="boxDialogVisible" title="装箱信息" width="600px">
      <el-form :model="boxForm" label-width="120px">
        <el-form-item label="内盒装量">
          <el-input-number v-model="boxForm.innerBoxQty" :min="1" style="width: 200px" />
          <span style="margin-left: 10px">个/盒</span>
        </el-form-item>

        <el-form-item label="外箱装量">
          <el-input-number v-model="boxForm.outerBoxQty" :min="1" style="width: 200px" />
          <span style="margin-left: 10px">盒/箱</span>
        </el-form-item>

        <el-alert
          :title="`每外箱可装 ${boxForm.innerBoxQty * boxForm.outerBoxQty} 个基本单位`"
          type="info"
          :closable="false"
          style="margin-bottom: 20px"
        />

        <el-divider>外箱规格</el-divider>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="长(cm)">
              <el-input-number v-model="boxForm.boxLength" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="宽(cm)">
              <el-input-number v-model="boxForm.boxWidth" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="高(cm)">
              <el-input-number v-model="boxForm.boxHeight" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="毛重(kg)">
              <el-input-number v-model="boxForm.grossWeight" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="净重(kg)">
              <el-input-number v-model="boxForm.netWeight" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <el-button @click="boxDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitBox">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Box, Plus } from '@element-plus/icons-vue'

const activeTab = ref('spec')
const dialogVisible = ref(false)
const boxDialogVisible = ref(false)

const products = ref([
  { id: 1, code: 'P001', name: 'iPhone 15' },
  { id: 2, code: 'P002', name: 'MacBook Pro' }
])

const packagingSpecs = ref([
  {
    id: 1,
    productCode: 'P001',
    productName: 'iPhone 15',
    level: '最小包装',
    packagingUnit: '盒',
    quantity: 1,
    length: 15,
    width: 8,
    height: 3,
    weight: 0.3,
    volume: 0.00036,
    material: '纸箱'
  },
  {
    id: 2,
    productCode: 'P001',
    productName: 'iPhone 15',
    level: '外箱包装',
    packagingUnit: '箱',
    quantity: 10,
    length: 45,
    width: 35,
    height: 25,
    weight: 3.5,
    volume: 0.039375,
    material: '纸箱'
  }
])

const boxingInfo = ref([
  {
    productCode: 'P001',
    productName: 'iPhone 15',
    innerBoxQty: 1,
    outerBoxQty: 10,
    boxLength: 45,
    boxWidth: 35,
    boxHeight: 25,
    grossWeight: 3.5,
    netWeight: 3.0
  }
])

const palletConfig = ref([
  {
    productCode: 'P001',
    productName: 'iPhone 15',
    palletType: '标准托盘',
    layersPerPallet: 5,
    boxesPerLayer: 8,
    totalBoxes: 40,
    palletWeight: 145
  }
])

const specForm = reactive({
  id: null,
  productId: null,
  level: '',
  packagingUnit: '',
  quantity: 1,
  length: 0,
  width: 0,
  height: 0,
  weight: 0,
  material: '',
  description: ''
})

const boxForm = reactive({
  innerBoxQty: 1,
  outerBoxQty: 10,
  boxLength: 0,
  boxWidth: 0,
  boxHeight: 0,
  grossWeight: 0,
  netWeight: 0
})

const calculatedVolume = computed(() => {
  if (specForm.length && specForm.width && specForm.height) {
    return (specForm.length * specForm.width * specForm.height) / 1000000
  }
  return 0
})

const dialogTitle = computed(() => specForm.id ? '编辑包装规格' : '添加包装规格')

const getLevelType = (level) => {
  const map = {
    '最小包装': 'success',
    '中包装': 'info',
    '大包装': 'warning',
    '外箱包装': 'danger'
  }
  return map[level] || ''
}

const handleAdd = () => {
  Object.assign(specForm, {
    id: null,
    productId: null,
    level: '',
    packagingUnit: '',
    quantity: 1,
    length: 0,
    width: 0,
    height: 0,
    weight: 0,
    material: '',
    description: ''
  })
  dialogVisible.value = true
}

const handleEdit = (row) => {
  Object.assign(specForm, { ...row })
  dialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessage.success('删除成功')
}

const handleEditBox = (row) => {
  Object.assign(boxForm, { ...row })
  boxDialogVisible.value = true
}

const handleEditPallet = (row) => {
  ElMessage.info('托盘配置编辑功能开发中')
}

const handleSubmit = () => {
  ElMessage.success('保存成功')
  dialogVisible.value = false
}

const handleSubmitBox = () => {
  ElMessage.success('保存成功')
  boxDialogVisible.value = false
}
</script>

<style scoped>
.packaging-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.page-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>

